<div class="page">
    <div class="main">
        <div class="step">
            <div class="done done2">
                <img src="../../../../../assets/images/done.png"><span>模板配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>数据集配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>模型配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>模型训练</span>
            </div>
            <div class="done done1">
                <img src="../../../../../assets/images/run.png"><span>模型评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>应用评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型部署</span>
            </div>
        </div>
        <div class="top_line"><img src="../../../../../assets/images/arrow.jpg" class="top_arrow"></div>
        <div class="tabCtx" *ngIf="step==1">
            <div class="tab-title">模型评估</div>
            <div class="tab-main">
                <div class="tips-img"><img src="../../../../../assets/images/proc.png"></div>
                <div class="tips">模型评估中，请等待...</div>
            </div>
        </div>
        <div class="context" *ngIf="step==2">
            <nz-tabset [nzAnimated]="'false'" style="width: 100%;">
                <nz-tab nzTitle=" 物体检测模型 ">
                    <div class="barChart">
                        <div class="barSelect">
                            添加对比版本&nbsp;&nbsp;
                            <nz-select>
                                <nz-option nzValue="请选择对比版本" nzLabel="请选择对比版本"></nz-option>
                            </nz-select>
                        </div>
                        <div echarts [options]="barChart" style="height: 100%;width:100%;"></div>
                    </div>
                    <div class="panel-title" (click)="swIsDetail()">详细评估&nbsp;&nbsp;&nbsp;&nbsp;<i nz-icon [nzType]="isDetail?'caret-up':'caret-down'" nzTheme="outline"></i></div>
                    <div class="panel-sub-title" *ngIf="isDetail">该标签识别的图片为识别错误的图片</div>
                    <div class="tables" *ngIf="isDetail">
                        <nz-table
                            #rowSelectionTable
                            nzShowPagination
                            nzShowSizeChanger
                            [nzData]="listOfData"
                        >
                        <tbody>
                            <tr>
                                <td>
                                    <img *ngFor="let data of rowSelectionTable.data" src="{{ data.url }}" (click)="onImgClick(data.id)">                        
                                </td>
                            </tr>
                        </tbody>
                        </nz-table>
                    </div> 
                </nz-tab>
                <nz-tab nzTitle=" 文字识别模型 ">

                </nz-tab>
                <nz-tab nzTitle=" 文字检测模型 ">

                </nz-tab>
            </nz-tabset>
        </div>
    </div>
    <div class="bottom">
        <button nz-button nzType="defalut" class="prebutton" (click)="return()">上一步</button>
        <button nz-button nzType="defalut" class="nextbutton" (click)="nextStep()">下一步</button>
    </div>
</div>
<nz-modal [(nzVisible)]="isVisible" nzTitle="" nzWidth="900px" (nzOnCancel)="handleCancel()" nzCentered="true" nzOkDanger="true">
    <div >
        <div class="modal-form-item">                
            <div class="modal-left">
                <img src="../../../../../assets/images/bgd.jpeg">
            </div>             
            <div class="modal-right">
                <div class="right-title">推理结果  abc123.jpg</div>
                <nz-tree [nzData]="nodes" nzShowIcon> </nz-tree>
            </div>
        </div>
    </div>
    <div *nzModalFooter style="display: flex;justify-content: center;align-items: center;">
        <button nz-button nzType="defalut">上一页</button>&nbsp;&nbsp; <span>1/10</span> &nbsp;&nbsp;
        <button nz-button nzType="defalut">下一页</button>
    </div>
</nz-modal>